<template>
  <div class="list-item">
    <div class="list-item-top"  @click="goRecord">
      <div class="list-no">{{ data.no }}</div>
      <div class="list-item-status">{{ data.process.name }}</div>
      <!-- <div class="list-item-status" v-if="data.process && data.status !== 8">{{ data.process.name }}</div> -->
      <!-- <div class="list-item-status successitem" v-if="data.status === 8">维修已完成</div> -->
    </div>
    <div class="height30"></div>
    <div class="list-item-infolist">
      <img src="../../../static/hos.png" alt="">
      <span class="list-item-infolistkey">医院名称：</span>
      <span class="list-item-infolistvalue">{{ data.hospital_name }}</span>
    </div>
    <div class="list-item-infolist">
      <img src="../../../static/time.png" alt="">
      <span class="list-item-infolistkey">报修时间：</span>
      <span class="list-item-infolistvalue">{{ data.created_at }}</span>
    </div>
    <div class="list-item-infolist">
      <img src="../../../static/concat.png" alt="">
      <span class="list-item-infolistkey">联系方式：</span>
      <span class="list-item-infolistvalue">{{ data.mobile }}</span>
      <a :href="'tel:' + data.mobile" rel="external nofollow" class="list-item-infolistphone">
        拨号
      </a>
    </div>
    <div class="listline"></div>
    <div class="list-itemdesc">
      {{ data.question_desc }}
    </div>
    <img v-if="data.question_image" :src="data.question_image" class="list-itemimg" alt="">
    <div class="list-itembtn-list" v-if="data.status !== 8">
      <div v-if="data.status === 2" class="listbtn btn140" @click="goYc">远程维修</div>
      <div v-if="data.status === 2" class="listbtn btn140" @click="goMail">邮寄维修</div>
      <div v-if="data.status === 4" class="listbtn" @click="goSign">签收</div>
      <div v-if="data.status === 5" class="listbtn btn14" @click="goFinish">维修完成</div>
      <div v-if="data.status === 6" class="listbtn" @click="goSendMail">寄出</div>
    </div>
    <div class="list-itembtn-no" v-else></div>
    <div class="mb" v-if="showConfirm || showConfirmFinish" @click="closeConfirm"></div>
    <div class="mbconfirm" v-if="showConfirm">
      <img src="../../../static/close.png" alt="" @click="closeConfirm">
      <div class="mbconfirm-content">请确认已完成远程维修</div>
      <div class="mbconfirm-btn">
        <div class="btnlist" @click="closeConfirm">取消</div>
        <div class="btnlist fullbtn" @click="confirmYc">确认</div>
      </div>
    </div>
    <div class="mbconfirm" v-if="showConfirmFinish">
      <img src="../../../static/close.png" alt="" @click="showConfirmFinish = false">
      <div class="mbconfirm-content">请确认已完成维修</div>
      <div class="mbconfirm-btn">
        <div class="btnlist" @click="showConfirmFinish = false">取消</div>
        <div class="btnlist fullbtn" @click="confirmFinish">确认</div>
      </div>
    </div>
  </div>
</template>

<script>
import { remote,finish } from '@/api/home.js'
export default {
  name: 'ListItem',
  props: {
    data: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      active: this.defaultActive,
      showConfirm: false,
      showConfirmFinish: false
    }
  },
  methods: {
    closeConfirm() {
      this.showConfirm = false
    },
    goYc() {
      // if (this.data.status !== 2) {
      //   return
      // }
      this.showConfirm = true
    },
    goFinish(){ 
      this.showConfirmFinish = true;
    },
    goMail() {
      // if (this.data.status !== 2) {
      //   return
      // }
      this.$router.push({ path: '/mail?no='+this.data.no+'&hospital_name='+encodeURIComponent(this.data.hospital_name)})
    },
    // 确认完成维修
    confirmFinish(){
      finish({no:this.data.no}).then((res) => {
        this.$toast.clear()
        if (res.err_code === 200 ){
          this.$notify({ type: 'success', message: res.msg })
        }
        this.showConfirmFinish = false
        setTimeout(()=>{
          this.$emit('refresh', '')
        },1000)

      }).catch((e) => { console.log(e) })
    },
    goSendMail() {
      // if (this.data.status !== 5) {
      //   return
      // }
      this.$router.push({ path: '/sendMail?no='+this.data.no+'&mobile='+this.data.mobile})
    },
    goSign() {
      // if (this.data.status !== 4) {
      //   return
      // }
      this.$router.push({ path: '/sign?no='+this.data.no})
    },
    goRecord() {
      this.$router.push({ path: '/speed?no='+this.data.no})
    },
    confirmYc() {
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true,
      });
      remote({no:this.data.no}).then((res) => {
        this.$toast.clear()
        if (res.err_code === 200 ){
          this.$notify({ type: 'success', message: res.msg })
        }
        this.showConfirm = false
        setTimeout(()=>{
          this.$emit('refresh', '')
        },1000)

      }).catch((e) => { console.log(e) })
    },

    handleChange(value) {
      this.$emit('change', value)
    }
  }
}
</script>

<style scoped>
.list-item-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-left: 15px;
  border-bottom: 1px solid #f4f4f4;
  padding: 7.5px 0;
}
.list-no{
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #191919;
}
.list-item-status{
  font-size: 12px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #FFFFFF;
  background: #A82025;
  border-radius: 13px 0px 0px 13px;
  height: 26px;
  line-height: 26px;
  padding-left: 13.5px;
  padding-right: 3.5px;
}
.successitem{
  background: #76DB3F;
}
.height30{
  height: 15px
}
.list-item-infolist{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 15px;
  margin-left: 15px;
}
.list-item-infolist img{
  width: 13px;
  height: 13px;
  margin-right: 10px;
}
.list-item-infolistkey{
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #929191;
}
.list-item-infolistvalue{
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #1F1F1F;
}
.listline{
  margin-left: 15px;
  width: 330px;
  border-bottom: 1px solid #F4F4F4;
}
.list-item-infolistphone{
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 400;
  text-decoration: underline;
  color: #A82025;
  margin-left: 10px;
}
.list-itemdesc{
  margin: 0 15px;
  margin-top: 14px;
  font-size: 12px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #1F1F1F;
  line-height: 18.5px;
}
.list-itemimg{
  margin-top: 11px;
  margin-left: 15px;
  width: 100px;
  height: 65px;
  border-radius: 5px;
}
.list-itembtn-list{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border-top: 1px solid #f4f4f4;
  margin-top: 15px;
  padding: 7.5px 12px;
  box-sizing: border-box;
}
.list-itembtn-no{
  height: 15px;
}
.btn140{
  width: 70px;
}
.listbtn{
  margin-left: 6px;
  height: 26px;
  background: #A82025;
  border-radius: 13px;
  text-align: center;
  line-height: 26px;
  min-width: 60px;
  font-size: 12px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #FFFFFF;
}
.btndis{
  background: #D6D6D6;
}
.mb{
  position: fixed;
  top: 0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.6);
  /*opacity: 0.1;*/
}
.mbconfirm{
  width: 345px;
  height: 180px;
  background: #FFFFFF;
  border-radius: 10px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-70%);
}
.mbconfirm img{
  width: 11.5px;
  height: 11.5px;
  display: block;
  margin-top: 30px;
  margin-right: 20px;
  float: right;
}
.mbconfirm-content{
  font-size: 18px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #000000;
  margin-top: 60px;
  text-align: center;
}
.mbconfirm-btn{
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-top: 41.5px;
}
.btnlist{
  width: 93.5px;
  height: 40px;
  background: #FFFFFF;
  border: 1px solid #A82025;
  border-radius: 20px;
  text-align: center;
  line-height: 40px;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #A82025;
}
.fullbtn{
  background: linear-gradient(135deg, #FF3737, #A82025);
  color: #ffffff;
}

</style>
